.socialButton {
  border: 0;
  height: 42px;
  padding-left: 20px;
  padding-right: 20px;
}

.socialButtonSection {
  &[data-position='left'] {
    margin-inline-end: var(--mantine-spacing-md);
  }
}

.discordButton {
  --discord-color: #5865f2;
  --discord-color-hover: #4f5bd5;

  [data-mantine-color-scheme] & {
    background-color: var(--discord-color);
    border-color: var(--discord-color);
    color: var(--mantine-color-white);

    @mixin hover {
      background-color: var(--discord-color-hover);
      border-color: var(--discord-color-hover);
    }
  }
}

.xButton {
  background-color: light-dark(var(--mantine-color-dark-7), var(--mantine-color-gray-3));
  color: light-dark(var(--mantine-color-white), var(--mantine-color-black));

  @mixin hover {
    background-color: light-dark(var(--mantine-color-dark-6), var(--mantine-color-gray-4));
  }
}
